<template>
  <el-card shadow="never">
    <div slot="header" ref="topHeader">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="卡号：">
          <el-input style="width: 160px" v-model="listQuery.cardNum" @keypress.native.enter="getList" placeholder="输入卡号" clearable/>
        </el-form-item>  
        <el-form-item label="是否激活">
          <el-select v-model="listQuery.isActivation" style="width: 160px" placeholder="选择是否激活" clearable>
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList" @keypress.native.enter="getList">查询</el-button>
          <el-button type="success" v-permission="['sys:card:add']" icon="el-icon-circle-plus-outline" @click="addEdit(null)">增加</el-button>
          <el-upload style="display: inline-block;margin-left:15px;"
            action=""
            :auto-upload="false"
            accept=".xlsx, .xls"
            :show-file-list="false"
            :on-change="handleUpload"
            name="file"
          >
            <el-button type="warning" size="small" :loading="importLoading" >导入</el-button>
          </el-upload>
          <el-button type="success" size="small" :loading="importLoading"
                v-permission="['sys:card:export']" @click="exportHandle" style="margin-left:15px;">导出</el-button>
          <el-link @click="downloadTemp" type="primary" style="margin-left:15px;">导入模板</el-link>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="loading" >
      <el-table ref="tableCot" element-loading-text="请稍后..." :data="tableData" border >
        <el-table-column  type="index" width="50" label="序号"/>
        <el-table-column prop="cardNum" label="卡号"  show-overflow-tooltip />
        <el-table-column prop="activationNum" label="激活码"  show-overflow-tooltip /> 
        <el-table-column prop="isActivation" label="是否被激活"  show-overflow-tooltip> 
          <template slot-scope="{row}">
            <el-tag type="warning" effect="dark" v-if="row.isActivation == 0">否</el-tag>
            <el-tag type="success" effect="dark" v-if="row.isActivation == 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="term" label="期限/年"  show-overflow-tooltip /> 
        <el-table-column prop="createTime" width="160" label="添加时间" show-overflow-tooltip/>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <!-- <el-tag v-permission="['sys:card:update']" style="cursor:pointer;margin-right: 4px;" size="mini" @click="addEdit(scope.row)"><i
                class="el-icon-edit"/>编辑
            </el-tag> -->
            <el-tag v-permission="['sys:card:delete']" style="cursor:pointer;" size="mini" type="danger" @click="remove(scope.row)"><i
                class="el-icon-delete"/>删除
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!--分頁-->
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>
      <!--添加/编辑-->
      <add-edit
          :dialog-visible="addEditVisible"
          :data="addEditData"
          @close="closeDialog"
          @reloadTable="reloadTable"
      />
    </div>
  </el-card>
</template>
<script>
import Pagination from '@/components/Pagination'
import addEdit from '@/views/biz/card/addEdit'
import cardApi from '@/api/system/card'
import publisherApi from '@/api/system/publisher'

export default {
  name: 'card',
  components: {Pagination, addEdit},
  data() {
    return {
      importLoading:false,
      loading: false,
      addEditVisible: false,
      customTableHeight: 200,
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10,
        cardNum: null,
      },
      tableData: [],
      addEditData: {},
      publisherList:[],
      curUserRole: -1
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  mounted() {
    // this.user.roles.forEach(item => {
    //   if(item != 1 && item != 2){
    //     this.curUserRole = 3;
    //     if( this.user.publisherIds){
    //       this.listQuery.inPulisherId = this.user.publisherIds
    //     }else{
    //       this.listQuery.inPulisherId = ''
    //     }
    //   }else{
    //     this.listQuery.inPulisherId = ''
    //   }
    // })
    this.getList();
    // this.getPublisher()
  },
  methods: {
    getList() { 
      this.loading = true;
      cardApi.list(this.listQuery).then(res => {
         console.log(res,"1324")
        this.tableData = res.data || []
        this.total = res.count || 0
        this.loading = false;
      }).catch(() => this.loading = false)
    },
    getPublisher(){
      publisherApi.getPublisher({inPulisherId:this.listQuery.inPulisherId}).then(res => {
        this.publisherList = res.data
      })
    },
    reloadTable(){
      this.getList();
    },
    //添加或修改弹窗
    addEdit(row) {
      if (row) {
        this.addEditData = JSON.parse(JSON.stringify(row))
      }else{
        this.addEditData = {};
      }
      this.addEditVisible = true
    },
    queryDetail(row){
      this.addEditData = JSON.parse(JSON.stringify(row))
      this.addEditVisible = true
    },
    downloadTemp(){
      window.open('/cardTemp.xlsx')
    },
    remove(row) {
      this.$confirm('确定要删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cardApi.remove(row.id).then(res => {
          this.reloadTable()
        })
      })
    },
    //导出
    exportHandle(){
      this.importLoading = true; 
      cardApi.exportExcel(this.listQuery).then(res => {
        this.$utils.downloadFile(res.data,'卡号管理','xlsx')
        this.importLoading = false;
        this.listQuery.size = 10;
      })
    },
    //导入
    handleUpload(data){
      this.importLoading = true;
      cardApi.importExcel(data.raw).then(res => {
        this.$message.success("导入成功！")
        this.importLoading = false;
        this.getList()
      })
    },
    closeDialog() {
      this.addEditVisible = false
    }
  }
}
</script>
<style scoped lang="scss">

</style>
